import React, { Component } from 'react';
import NewsStyled from './newsstyled';
import axios from 'axios';
import store from '../../store/';
export default class news extends Component {
    constructor(props){
        super(props);
        this.state={
            newlist:[]
        }
    }
    componentDidMount(){
        axios({
            url:"http://localhost:4000/newslist",
            method:"get"
        }).then((res)=>{
            // console.log(res);
            this.setState({
                newlist:res.data
            })
        })
        // console.log(store.getState().text);
        
        
    }
    rev=()=>{
        store.dispatch({type:"REV",data:this.state.newlist});
    }
    fun(id){
        this.props.history.push(`/newsdetail/${id}`);
    }
    render() {
        return (
            <div>
                <NewsStyled>
                    {/* header图片栏 */}
                    <header>
                        <img src="news/news_banner1.jpg" alt=""/>
                    </header>
                    {/* 新闻栏 */}
                    <section onClick={this.rev}> {/*利用事件冒泡触发该函数*/}
                        {
                            this.state.newlist.map((v,i)=>{
                                return (
                                    <div className="newsbox" key={v.id} onClick={this.fun.bind(this,v.id)}>
                                        <img src={v.imgurl} alt=""/>
                                        <div className="newstext">
                                            <h4>{v.title.substring(0,12).concat("...")}</h4>
                                            <p>{v.content.substr(0,46).concat("...")}</p>
                                            <span>{v.data}</span>
                                        </div>
                                    </div>
                                )
                            })
                        }
                      
                    </section>
                </NewsStyled>
            </div>
        )
    }
}
